<template>
  <transition name="slide-fade">
    <div v-if="showNav" :class="equ === 'pc' ? 'nav-bar-pc' : 'nav-bar'">
      <div class="relative nav-item">
        <ApngStatus class="cube-content" name="subscribe" type="static" @hand="switchAnimation(3)" />
      </div>
      <div v-if="equ === 'h5'" class="relative nav-item">
        <ApngStatus class="cube-content" name="share" type="static" @hand="switchAnimation(2)" />
      </div>
      <div class="relative nav-item">
        <ApngStatus class="cube-content" name="apply" type="static" @hand="switchAnimation(1)" />
      </div>
      <div class="relative nav-item">
        <ApngStatus class="cube-content" name="cooperation" type="static" @hand="switchAnimation(4)" />
      </div>
    </div>
  </transition>
</template>
<script lang="ts" setup name="NavBar">
import { useSub, useShare, useForm } from '@/utils/comps';
import { useConfigStore } from '@/store/config';
import { useTtsaStore } from '@/store/ttsa';
import { useAppRouter } from '@/hooks';
import { useTrack } from '@/hooks';
import { MODE } from '@/constants/ttsa'
import { equ } from '../../../../package-env';

const translateX = equ === 'pc' ? '-100px' : '20px';
const ttsaStore = useTtsaStore();
const configStore = useConfigStore();
const { setTrack } = useTrack();
const navAnimationConfig = reactive({
  '0': false, // 内容
  '1': false, // 试用
  '2': false, // 分享
  '3': false, // 订阅
  '4': false, // 表单
});
const navData = computed(() => configStore.navs);
const showNav = computed(() => (configStore.switchMODE === 'nav' || equ === 'pc' || ttsaStore.mode === MODE.QA) && navData?.value?.length > 0);

const funMap = {
  '0': (link) => {
    const [content_id, node_id] = link.split('_')
    ttsaStore.next({ content_id, node_id, jump_type: 'peek' })
  }, // 内容
  '1': useAppRouter, // 外链
  '2': useShare, // 分享
  '3': useSub, // 订阅
  '4': (id) => useForm(id, true), // 表单
}

const nodeClick = (node) => {
  const { link_type, link, interrupt_digital } = node
  if (interrupt_digital && !ttsaStore.paused) ttsaStore.pause()
  if (Number(link_type) === 2) {
    // 统计分享点击
    setTrack({
      name: 'interactive',
      type: 'share',
    })
  }
  funMap[link_type](link)
}

const switchAnimation = (type: number) => {
  navAnimationConfig[type] = !navAnimationConfig[type];
  const currentNode = navData?.value?.find((item: any) => item?.link_type === type);
  nodeClick(currentNode);
}

onBeforeMount(() => {
  if (configStore.nav_is_show) {
    configStore.getNavConfig()
  }
})
</script>
<style lang="scss" scoped>
.slide-fade-enter-active {
  transition: all 0.15s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.15s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(v-bind(translateX));
  opacity: 0;
}

.nav-bar {
  position: absolute;
  top: 20%;
  right: -6px;
  height: 40%;

  .nav-item {
    .cube-content {
      width: 60px;
      height: 60px;
    }

    &:nth-child(1),
    &:nth-child(4) {
      .cube-content {
        width: 65px;
        height: 65px;
      }
    }

    &:nth-child(2) {
      right: 25px;
      top: 8px;
    }

    &:nth-child(3) {
      top: 16px;
    }

    &:nth-child(4) {
      right: 25px;
      top: 24px;
    }
  }
}

.nav-bar-pc {
  position: fixed;
  top: 10%;
  left: 7%;
  height: 30%;

  .nav-item {
    .cube-content {
      width: 80px;
      height: 80px;
      cursor: pointer;
      transition: all;

      &:hover {
        transform: scale(1.1);
      }
    }

    &:nth-child(1) {
      right: 25px;

      .cube-content {
        width: 87px;
        height: 87px;
      }
    }

    &:nth-child(2) {
      top: 8px;
    }

    &:nth-child(3) {
      right: 25px;
      top: 20px;
    }
  }
}
</style>
